<template>
  <div class="container">
    <main-header :actived="1" />
    <!-- <van-loading 
      v-if="!categories.length" 
      class="share-loading" 
      size="24px" 
      vertical
    >
      加载中...
    </van-loading> -->
    <!-- <img class="share-loading" v-if="categories.length<=1" src='../../assets/img/logo-b.png' /> -->
    <!-- 产品分类 -->
    <scroll-category v-if="categories.length>1" :categories="categories" :currentIndex="currentIndex" @itemClicked="switchList" />
    <!-- 列表 -->
    <div class="list">
      <div 
        class="item" 
        v-for="(item, index) in articlesNow.Articles" 
        :key="index"
        @click="goToDetail(item.id)"
      >
        <div class="intro">
          <div class="img">
            <!-- <img src='../../assets/img/brand-1.jpg' /> -->
            <img :src='item.iconurl' />
          </div>
          <h3>{{item.title}}</h3>
          <div class="time">
            <em>{{item.addDate}}</em>
            <!-- <span>{{item.categoryName}}</span> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MainHeader from 'components/content/MainHeader'
import ScrollCategory from 'components/content/ScrollCategory'
import { getBrand, getBrandDetail } from '../../network/brand'
import { format } from 'date-fns'

export default {
  name: 'Brand',
  components: {
    MainHeader,
    ScrollCategory,
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      allGot: false,
      categories: [
        {Id: 0, Name: '全部'},
        // {Id: 1, Name: 'TITIKA'},
        // {Id: 2, Name: '品牌大使'},
        // {Id: 3, Name: '产品护理'},
        // {Id: 4, Name: '面料科技'},
        // {Id: 5, Name: '品牌动向'},
        // {Id: 6, Name: '关于我们'}
      ],
      currentIndex: 0,
      articles: [],
      articlesAll: {
        Key: '全部',
        Articles: [],
      },
      articlesNow: [],
    }
  },
  mounted() {
    this.getBrand()
  },
  methods: {
    getBrand(history){
      let requestData = {
        titleKeyWords: '',
        rows: this.pageSize,
        page: this.pageNo,
      }
      getBrand(requestData,list => {
        let categories = []
        let articlesAll = []
        list.map((item, index) => {
          // 添加分类
          let repeatCate = this.categories.map((itemIn, idx) => {
            if(item.Key === itemIn.Name){
              return true
            } else {
              return false
            }
          })
          // 不是重复分类值
          if(repeatCate.indexOf(true) === -1){
            let Id = categories.length + this.categories.length
            categories.push({Id, Name: item.Key})
          }
          
          // 分类全部下的数据
          articlesAll = [...articlesAll, ...item.Articles]
          
          // 用于所有分类下切换
          if(!this.articles.length){
            this.articles.push(item)
            return false
          }

          let repeatKey = this.articles.map((itemIn, idx) => {
            if(item.Key === itemIn.Key){ // 如果接口获取数据与之前Key重复, 则合并
              let contactArticles
                  = [...this.articles[idx].Articles, ...item.Articles]
              this.$set(this.articles[idx], 'Articles', contactArticles)
              return true
            } else {
              return false
            }
          })
          // 不是重复Key值
          if(repeatKey.indexOf(true) === -1){
            this.articles.push(item)
          }
        })
        this.categories = [...this.categories, ...categories]
        this.$set(this.articlesAll, 'Articles', [...this.articlesAll.Articles, ...articlesAll])
        this.articlesNow = this.articlesAll

        if(list.length){
          this.pageNo++
          this.getBrand()
        } else {
          this.allGot = true
          this.articles.unshift(this.articlesAll) // 分类全部下的数据
        }
        
        // let listAll = []
        // let categories = [{Id: 0, Name: '全部'}]
        // list.map((item, index) => {
        //   listAll = [...listAll, ...item.Articles]
        //   categories.push({Id: index, Name: item.Key})
        // })
        // this.$set(this.articlesAll, 'Articles', listAll)
        // this.categories = categories

        // this.articles = list
        // this.articlesNow = this.articlesAll
      })
    },
    
    getList(listItem){
      listItem = listItem[0]
      this.articles = listItem.Articles
      this.articles = this.articles.map(item => {
        item.addDate = format(new Date(item.addDate), 'yyyy-MM-dd HH:mm:ss')
        return item
      })
    },
    switchList(index){
      console.log(index)
      if(!this.allGot){
        return false
      }
      this.currentIndex = index
      this.articlesNow = this.articles[index]
    },
    goToDetail(id){
      this.$router.push({
        path: '/newsDetail',
        query: {
          id
        }
      })
    },
  },
}
</script>

<style scoped>
.list .item{
  margin: 0 10px 10px 10px;
  padding: 26px 30px;
  border-radius: 6px;
  background-color: #ffffff;
  overflow: hidden;
}
.list .item:first-child{
  padding: 0;
}
.list .item:first-child .img{
  height: 0;
  width: 100%;
  padding-bottom: 50%;
  margin-left: 0;
  margin-bottom: 15px;
  float: none;
}
.list .item:first-child h3{
  padding: 0 30px;
}
.list .item:first-child .time{
  padding: 0 30px 26px 30px
}
.list .item .img{
  position: relative;
  float: right;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  margin-left: 10px;
}
.list .item .img img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.list .item .intro:after{
  display: block;
  content: '';
  clear: both;
}
.list .item .intro h3{
  font-size: 16px;
  padding-bottom: 20px;;
  box-sizing: border-box;
}
.list .item .intro .time{
  color: #8c8c8c;
  font-size: 14px;
  line-height: 1;
}
.list .item .intro .time span{
  display: inline-block;
  border-left: 1px solid #cccccc;
  margin-left: 20px;
  padding-left: 20px;
}
.share-loading{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -130px 0 0 -30px;
  opacity: .2;
  animation: rotate 3s linear infinite;
}
@keyframes rotate{
  from{transform: rotate(0deg)}
  to{transform: rotate(360deg)}
}
</style>
